<template>
  <div class="content">
    <div class="title">章节练习题</div>
    <div v-for="(ele, index) in cardList" :key="index" class="content-item">
      <div v-if="ele.subhead !== 'null'" class="subtitle">
        {{ ele.subhead }}
      </div>
      <div class="grid-container">
        <div class="card" v-for="(item, index) in ele.children" :key="index" @click="toPractice(item)">
          <div class="card-icon">
            <!-- <span class="icon-text">精</span> -->
            <img src="@/assets/img/chapterIcon.png" alt="">
          </div>
          <div class="card-content">
            <div class="card-title">{{ item.name }}</div>
          </div>
          <div class="card-number flex flex-align-center">
            <div>
              {{ item.questionCount }}题
            </div>
            <el-icon>
              <ArrowRightBold />
            </el-icon>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getQuestionInfo } from '@/api/userApi'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { useUserStore } from '@/store/user'
import { ArrowRightBold } from '@element-plus/icons-vue'

const router = useRouter()
const userStore = useUserStore()
const cardList = ref<any>([])

const fetchQuestionInfo = async () => {
  try {
    const res = await getQuestionInfo({
      categoryIds: userStore.categoryId,
      carIds: userStore.storeInfo.carModelId,
      pageUrlType: '06',
      pageSize: 100,
      pageNum: 1,
      status: 1
    })
    if (res.code === '00000') {
      const children = res.data.list[0].children || []
      const grouped: Record<string, any[]> = {}
      children.forEach((item: any) => {
        const key = item.subhead
        if (!grouped[key]) {
          grouped[key] = []
        }
        grouped[key].push(item)
      })
      const arr = Object.keys(grouped).map(subhead => ({
        subhead,
        children: grouped[subhead]
      }))
      cardList.value = [
        ...arr.filter(item => item.subhead === '' || item.subhead === null),
        ...arr.filter(item => item.subhead !== '' && item.subhead !== null)
      ]
    } else {
    }
  } catch (error) {
    console.error('请求错误:', error)
  }
}
const toPractice = (item: any) => {
  console.log(item)

  if (item.questionCount > 0) {
    router.push({ name: 'chapterExam', query: { id: item.id } })
  } else {
    ElMessage.warning('该分组暂无题库')
  }
}
onMounted(() => {
  fetchQuestionInfo()
})
</script>
<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
  @return math.div($px, 16) * 1rem;
}

.content {
  padding: rem(50) rem(30);
  min-height: calc(100vh - 92px);
}

.content-item {
  margin-bottom: rem(20);
}

.title {
  font-size: rem(35);
  font-weight: 500;
  color: #333;
  margin-bottom: rem(30);
}

.subtitle {
  font-size: rem(25);
  font-weight: 500;
  color: #333;
  margin-bottom: rem(20);
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  flex-wrap: wrap;
  gap: rem(40);
  width: 100%;
}

.card {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f7f9ff;
  border-radius: rem(16);
  padding: rem(27) rem(40) rem(27) rem(20);
  flex: 1 1 calc(50% - rem(10));
  min-width: rem(300);
  box-shadow: 0 rem(2) rem(8) rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  background: url('@/assets/img/chapter.png') no-repeat;
  background-position: center;
  background-size: cover;
  cursor: pointer;

  &:hover {
    transform: translateY(rem(-10));
    box-shadow: 0 rem(4) rem(12) rgba(0, 0, 0, 0.15);
  }
}

.card-icon {
  width: rem(50);
  height: rem(50);
  background-color: #fff;
  border-radius: 50%;
  margin-right: rem(15);
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: rem(40);
    height: rem(40);
  }
}

.icon-text {
  color: white;
  font-size: rem(18);
  font-weight: bold;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-title {
  font-size: rem(25);
  color: #fff;
  font-weight: 500;
  line-height: 1.4;
}

.card-number {
  font-size: rem(25);
  color: #fff;
  font-weight: 600;
  margin-left: auto;
  flex-shrink: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .card {
    flex: 1 1 100%;
    min-width: auto;
  }

  .grid-container {
    gap: rem(15);
  }
}
</style>
